<template>
  <ContentWrap>
    <div class="flex">
      <div style="width:300px;border-right: 1px solid #eee;" class="p-10 left-tree">
        <el-button link type="primary" @click="handleAdd">新增</el-button>
        <avue-tree :option="option(level)" ref="tree" :beforeOpen="beforeOpen" @edit="edit" @nodeClick="nodeClick"
          :filter-node-method="filterNode" node-key="id" v-model="form" :key="treeKey">
          <template #default="{ node, data }">
            <div class="flex row-between w-100">
              <div>
                {{ data.title }}
              </div>
              <div>
                <el-icon size="16" color="#333" v-if="node.level !== 3" class="m-r-10"
                  @click.stop="handleAdd(node, data)">
                  <Plus />
                </el-icon>
                <el-icon class="m-r-10" @click.stop="handleEdit(node, data)">
                  <Edit />
                </el-icon>
                <el-icon class="m-r-10" @click.stop="handleDelete(node, data)">
                  <Delete />
                </el-icon>
              </div>
            </div>
          </template>
        </avue-tree>
      </div>
      <div class="flex-1  p-20 flex-wrap" style="width:0;height:100vh;">
        <el-card style="width: 200px;height: 200px;display: inline-block; " class="m-10 center text-center"
          v-for="item in list" :key="item.id">
          <h3>{{ item.title }}</h3>
          <div class="font-16" v-if="item.householdNumber">{{ item.householdNumber }}人间</div>
          <el-button class="font-16 m-t-10" type="text" v-if="item.householdNumber">余位{{ item.householdNumber
            }}</el-button>
        </el-card>
      </div>
      <el-dialog v-model="FormDialog">
        <avue-form :option="formOptions(level)" @submit="save" v-model="form"></avue-form>
      </el-dialog>
    </div>
  </ContentWrap>
</template>

<script setup>
import * as Api from "@/api/house/floor";
const form = ref({ title: '', householdNumber: 0 })
const list = ref([])
const level = ref()
const tree = ref('tree')
const dataInfo = ref()
const nodeInfo = ref()
const FormDialog = ref(false)
const treeKey = ref(4)
const type = ref('')
const filterNode = (value, data) => {
  console.log(data, value)
  if (!value) return true
  if (data.title) {
    return data.title.includes(value)
  }
}
const formOptions = (level) => {
  return {

    column: [
      {
        label: '楼栋',
        prop: 'title',
        type: "input",
        placeholder: '请输入楼栋',
        display: !level,
        rules: [{
          required: true,
          trigger: "blur",
          message: "请输入楼栋",

        }]
      },
      {
        label: '楼层',
        prop: 'title',
        type: "input",
        placeholder: '请输入楼层',
        display: computed(() => level == 1).value,
        require: true,
        rules: [{
          required: true,
          trigger: "blur",
          message: "请输入楼层",
        }]
      },
      {
        label: '房号',
        prop: 'title',
        type: "input",
        placeholder: '请输入房号',
        display: computed(() => level == 2).value,
        span: 24,
        require: true,
        rules: [{
          required: true,
          trigger: "blur",
          message: "请输入房号",
        }]
      },
      {
        label: '可住人数',
        prop: 'householdNumber',
        type: "number",
        placeholder: '请输入可住人数',
        require: true,
        span: 24,
        display: computed(() => level == 2).value,
        rules: [{
          required: true,
          trigger: "blur"
        }]
      },
    ]
  }
}
const option = (level) => {
  console.log(level)
  return {
    menu: false,
    filter: false,
    props: {
      label: 'title',
      value: 'id',
    },
    lazy: true,
    treeLoad: async (node, resolve) => {
      if (node.level === 0) {
        const data = await Api.getDormbuildPage({ pageSize: 100 })
        list.value = data.list
        return resolve(data.list)
      }
      if (node.level == 1) {
        if (!node.data.id) return
        const data = await Api.getDormFloorPage({ pageSize: 100, buildId: node.data.id })
        list.value = data.list
        return resolve(data.list.map(e => {
          return {
            ...e
          }
        }))
      } else if (node.level == 2) {
        if (!node.data.id) return
        const data = await Api.getDormroomPage({ pageSize: 100, buildId: node.data.buildId, floorId: node.data.id })
        list.value = data.list
        return resolve(data.list.map(e => {
          return {
            ...e,
            leaf: true
          }
        }))
      }
    }
  }

}

const handleAdd = (node, data) => {
  type.value = 'post'
  level.value = node.level
  if (level) {
    nodeInfo.value = node
  } else {
    nodeInfo.value = ''
  }
  form.value.title = ''
  form.value.householdNumber = ''
  FormDialog.value = true
}

const handleEdit = (node, data) => {
  type.value = 'put'
  level.value = node.level - 1
  if (level) {
    nodeInfo.value = node
  } else {
    nodeInfo.value = ''
  }
  form.value.title = data.title
  form.value.householdNumber = data.householdNumber
  FormDialog.value = true
}

const handleDelete = async (node, data) => {
  level.value = node.level - 1
  if (level.value == 0) {
    const datas = await Api.delDormbuildPage(node.data.id)
    refreshTreeNode()
  } else if (level.value === 1) {
    const datas = await Api.delDormFloorPage(node.data.id)
    refreshTreeNode(node.parent.data.id)
  } else if (level.value === 2) {
    const datas = await Api.delDormroomPage(node.data.id)
    refreshTreeNode(node.parent.data.id)
  }

  done();
}

const nodeClick = (data, node) => {
  if (node.level == 3) return
  if (!data.leaf) refreshTreeNode(data.id)
  if (node.childNodes && node.childNodes.length > 0) {
    list.value = node.childNodes.map(e => {
      return e.data
    })
  } else {
    list.value = []
  }

}

const refreshTreeNode = (id) => {
  if (id) {
    let node = tree.value.getNode(id);
    if (node) {
      node.loaded = false;    //告诉组件这个节点需要加载
      node.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
    }
  } else {
    treeKey.value++;
  }

}

const edit = async (form, done) => {
  const node = nodeInfo.value
  console.log(node)
  const data = form
  level.value = node?.level - 1 || 0
  console.log(level.value)
  if (level.value === 0) {
    const datas = await Api.updateDormbuildPage({ title: data.title, id: node.data.id })
    refreshTreeNode()
  } else if (level.value === 1) {
    const datas = await Api.updateDormFloorPage({ title: data.title, buildId: node.data.buildId, id: node.data.id })
    refreshTreeNode(node.parent.data.id)
  } else if (level.value === 2) {
    const datas = await Api.updateDormroomPage({ title: data.title, id: node.data.id, buildId: node.data.buildId, floorId: node.data.floorId, householdNumber: data.householdNumber })
    refreshTreeNode(node.parent.data.id)
  }
  done();
  FormDialog.value = false
}

const save = async (form, done) => {
  if (type.value === 'post') {
    const node = nodeInfo.value
    level.value = node.level
    const data = form
    if (!node.level) {
      const datas = await Api.postDormbuildPage({ title: data.title })
    } else if (node.level === 1) {
      const datas = await Api.postDormFloorPage({ title: data.title, buildId: node.data.id, })
    } else if (node.level === 2) {
      const datas = await Api.postDormroomPage({ title: data.title, buildId: node.data.buildId, floorId: node.data.id, householdNumber: data.householdNumber })
    }
    if (node.data) refreshTreeNode(node.data.id)
    else refreshTreeNode()
    FormDialog.value = false
    done();
  } else {
    edit(form, done)
  }

}

const saves = async (nodes, data, done, loading) => {
  const node = nodeInfo.value || nodes
  level.value = node.level
  if (!node.level) {
    const datas = await Api.postDormbuildPage({ title: data.title })
  } else if (node.level === 1) {
    const datas = await Api.postDormFloorPage({ title: data.title, buildId: node.data.id, })
  } else if (node.level === 2) {
    const datas = await Api.postDormroomPage({ title: data.title, buildId: node.data.buildId, floorId: node.data.id, householdNumber: data.householdNumber })
  }
  refreshTreeNode(node.data.id)
  done();
}
</script>

<style lang="scss" scoped>
.left-tree {
  height: calc(100vh - 200px);
}
</style>